<template>
    <div class="user_merber_list">
        <div v-if="isSCrm" class="member-sCrm-header">已同步SCRM中的会员等级，请前往SCRM后台查看会员等级相关信息。</div>
        <div class="zw-form-layout">
            <el-form ref="formRef" :model="form" label-width="80px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="会员ID/昵称/手机号：" prop="keywords" label-width="155px">
                            <el-input
                                v-model="form.keywords"
                                clearable
                                placeholder="请输入会员ID/昵称/手机号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="会员等级" prop="levelId">
                            <el-select v-model="form.levelId" clearable placeholder="全部">
                                <el-option
                                    v-for="item in Data.vipList"
                                    :key="item.id"
                                    :label="item.memberLevelName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="加入时间" prop="joinAt">
                            <el-date-picker
                                v-model="form.joinAt"
                                type="daterange"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                :default-time="defaultDateRange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="zw-form-btns">
                        <el-button type="primary" @click="searchHandler">查询</el-button>
                        <el-button plain @click="resetHandler">清空</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row>
            <el-col class="zw-table-btns">
                <el-button type="primary" v-auth="'merber_management:export'" @click="merberExportHandler">
                    会员导出
                </el-button>
            </el-col>
        </el-row>
        <el-table :data="Data.tableList" stripe>
            <el-table-column label="会员ID" min-width="100" show-overflow-tooltip prop="memberNo">
                <template v-slot="{ row }">
                    <span class="link" @click="viewDetail(row)">{{ row.memberNo }}</span>
                </template>
            </el-table-column>
            <el-table-column label="会员昵称" prop="nickname"></el-table-column>
            <el-table-column label="手机号" prop="mobile"></el-table-column>
            <el-table-column label="会员等级" prop="level.memberLevelName" width="100"> </el-table-column>
            <el-table-column label="成长值" prop="growthVal">
                <template v-slot="{ row }">
                    <span class="link" @click="showGrowDialog(row)">{{ row.growthVal }}</span>
                </template>
            </el-table-column>
            <el-table-column label="可用积分" prop="availablePoints">
                <template v-slot="{ row }">
                    <span class="link" @click="showIntegralDialog(row)">
                        {{ floatDivide(row?.points?.availablePoints, 100) || 0 }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="加入时间" min-width="100" prop="joinAt"></el-table-column>
            <el-table-column v-auth="'merber_management:detail'" fixed="right" label="操作" width="120">
                <template v-slot="{ row }">
                    <el-button size="small" @click="viewDetail(row)"> 查看详情 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 15px">
            <Pagination
                :total="totalCount"
                :page-size="form.perPage"
                :current-page="form.page"
                @sizeChange="changeSizeHandler"
                @pageChange="changePageHandler" />
        </div>
        <ZwIntegarlLog ref="ZwIntegarlLogRef" :memberId="currentRowId" :openKid="currentRowOpenKid" />
        <ZwGrowLog ref="ZwGrowLogRef" :memberId="currentRowId" :openKid="currentRowOpenKid" />
    </div>
</template>

<script setup name="merberList">
import { ref, reactive, onMounted, onActivated, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import Pagination from '@/components/Pagination.vue';
import request from '@/request/index';
import { exportExc, floatDivide } from '@/commons/utils';

const router = useRouter();
const formRef = ref();
const totalCount = ref(0);
const form = reactive({
    page: 1,
    perPage: 10,
    joinAt: null,
    appType: 1,
    keywords: null,
    levelId: null
});
const defaultDateRange = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];
let Data = reactive({
    tableList: [],
    vipList: []
});
const isSCrm = ref(false);

const quertVipList = async () => {
    if (isSCrm.value) {
        const res = await request('getSCrmLLevelListServ');
        Data.vipList = res.data;
    } else {
        const res = await request('getRankListServ');
        Data.vipList = res.data;
    }
};

/**
 * 分页查询
 */
const quertRoleListHandler = async () => {
    const res = await request('memberListServ', form);
    const { list } = res.data;
    Data.tableList.length = 0;
    Data.tableList.push(...list);
    totalCount.value = res.data.totalCount;
};

/**
 * 重置
 */
const resetHandler = () => {
    formRef.value.resetFields();
};

/**
 * 搜索
 */
const searchHandler = () => {
    form.page = 1;
    quertRoleListHandler();
};
/**
 * 分页
 * @param {*} page
 */
const changePageHandler = page => {
    form.page = page;
    quertRoleListHandler();
};

/**
 * 每页记录数修改
 * @param {*} page
 */
const changeSizeHandler = pageSize => {
    form.page = 1;
    form.perPage = pageSize;
    quertRoleListHandler();
};

const viewDetail = row => {
    window.open(location.origin + '/user/merber/detail?id=' + row.id + '&openKid=' + row.openKid);
};

const merberExportHandler = () => {
    request('exportMemberListServ', form).then(res => {
        exportExc(res, `会员导出_${new Date().getTime()}`);
    });
};

const currentRowId = ref();
const currentRowOpenKid = ref();
const ZwGrowLogRef = ref();
const showGrowDialog = row => {
    currentRowId.value = row.id;
    currentRowOpenKid.value = row.openKid;
    nextTick(() => {
        ZwGrowLogRef.value.onOpen();
    });
};

const ZwIntegarlLogRef = ref();
const showIntegralDialog = row => {
    currentRowId.value = row.id;
    currentRowOpenKid.value = row.openKid;
    nextTick(() => {
        ZwIntegarlLogRef.value.onOpen();
    });
};

const getFollowRule = async () => {
    let params = {
        rule: 1
    };
    let res = await request('getFollowRuleServ', params);
    const type = res?.data?.levelFollow;
    isSCrm.value = type == 2;
    quertVipList();
};

onMounted(() => {
    searchHandler();
});

onActivated(() => {
    // quertRoleListHandler();
    getFollowRule();
});
</script>
<style lang="scss" scoped>
.user_merber_list {
    .link {
        color: #ff6b00;
        cursor: pointer;
    }
    .member-sCrm-header {
        background: #fffaf9;
        border: 1px solid #facaa8;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        padding-left: 16px;
        margin-bottom: 20px;
        color: var(--el-color-primary);
    }
}
</style>
